import 'package:flutter/material.dart';
import 'package:flutter_taotaoshipin/pages/drama/drama_routes.dart';
import 'package:flutter_taotaoshipin/widget/load_image.dart';
import 'package:flutter_taotaoshipin/widget/my_app_bar.dart';
import 'package:flutter_taotaoshipin/widget/refresh_header.dart';
import 'package:flutter_taotaoshipin/widget/refresh_status_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'collect_controller.dart';

class CollectPage extends StatefulWidget {
  const CollectPage({Key? key}) : super(key: key);

  @override
  State<CollectPage> createState() => _CollectPageState();
}

class _CollectPageState extends State<CollectPage> {
  final controller = Get.find<CollectController>();
  final state = Get.find<CollectController>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        centerTitle: '追剧',
      ),
      body: RefreshStatusView(
        controller: controller,
        contentBuilder: (_) {
          return SmartRefresher(
            controller: controller.refreshController,
            // 下拉刷新
            enablePullDown: true,
            header: const RefreshHeader(),
            onRefresh: controller.onRefresh,
            child: CustomScrollView(
              slivers: [
                _buildCollect(),
              ],
            ),
          );
        },
      ),
    );
  }

  _buildCollect() {
    if (state.collectList.isEmpty) {
      return SliverToBoxAdapter();
    }

    double itemWidth = (Get.width - 17 * 2 - 7 * 2) / 3;
    double itemHeight = itemWidth / 110 * 152;
    return SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 17, vertical: 9),
      sliver: SliverGrid.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 7,
          mainAxisSpacing: 20,
          mainAxisExtent: itemHeight,
        ),
        itemBuilder: (_, index) {
          var model = state.collectList[index];
          return GestureDetector(
            onTap: () {
              // 跳转视频详情页
              Get.toNamed(DramaRoutes.detail, arguments: {
                'id': model.mainId,
                'title': model.dramaName,
                'sort': model.sort,
              });
            },
            child: Stack(
              children: [
                AspectRatio(
                  aspectRatio: 110 / 152,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: LoadImage(model.cover ?? ''),
                  ),
                ),
                Positioned(
                  left: 0,
                  bottom: 0,
                  right: 0,
                  child: Container(
                    width: double.infinity,
                    alignment: Alignment.center,
                    padding: EdgeInsets.symmetric(
                        horizontal: 4, vertical: 4),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.vertical(
                          bottom: Radius.circular(8)),
                      gradient: LinearGradient(
                        colors: [
                          Colors.transparent,
                          Color(0x99000000),
                        ],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                      ),
                    ),
                    child: Text(
                      model.dramaName ?? '',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                      ),
                      maxLines: 1,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        itemCount: state.collectList.length,
      ),
    );
  }
}
